<template>
  <div class="container">
    <!-- 图片列表 -->
    <a-card class="data-card" v-show="!addbsshow">
      <a-form
        :model="formModel"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
      >
        <a-row :gutter="20">
          <a-col :span="5">
            <a-form-item field="medicineAtlasName" label="图谱名称">
              <a-input
                v-model="formModel.medicineAtlasName"
                placeholder="请输入图谱名称"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item field="bodyPartsId" label="所属部位">
              <a-select
                :field-names="fieldNames"
                v-model="formModel.bodyPartsId"
                placeholder="请选择所属部位"
                :options="bodyPartdata"
              >
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item field="medicineSystemId" label="人体系统">
              <a-select
                :field-names="fieldNamessd"
                v-model="formModel.medicineSystemId"
                placeholder="请选择人体系统"
                :options="medicineSystemIddata"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-space :size="18">
              <a-button type="primary" @click="onPageChange(1)">
                <template #icon>
                  <icon-search />
                </template>
                搜索
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
              <a-button @click="openAdd('')" type="primary">
                <template #icon>
                  <icon-plus />
                </template>
                添加图谱
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>

      <div class="tpmainbox beautifulScroll">
        <a-row>
          <a-col :span="17">
            <div :style="{ display: 'flex' }" class="wbox">
              <a-card
                :title="item.partsName"
                v-for="item in tplistdata"
                :key="item"
              >
                <template #extra>
                  <!-- <a-link>More</a-link> -->
                </template>
                <div class="bwbox">
                  <div
                    class="bwitem"
                    v-for="items in item.atlasList"
                    :key="items"
                  >
                    <a-switch
                      v-model="items.status"
                      :checked-value="1"
                      :unchecked-value="0"
                      class="imgclose"
                      @change="statusfn(items.medicineAtlasId, $event)"
                    />
                    <div class="bwitemimg" @click="gobw(items)">
                      <img :src="`${base + items.url}`" alt=""
                    /></div>
                    <div class="bwitemdesbox">
                      <div
                        class="bwitemtitle"
                        :title="items.medicineAtlasName"
                        >{{ items.medicineAtlasName }}</div
                      >
                      <div class="gmove">
                        <a-dropdown>
                          <a-button>更多</a-button>
                          <template #content>
                            <a-doption @click="openAdd(items)">编辑</a-doption>

                            <a-doption @click="gobw(items)">查看</a-doption>
                            <a-doption @click="openDeletes(items)"
                              >删除</a-doption
                            >
                          </template>
                        </a-dropdown></div
                      >

                      <!-- <div
                      class="movebox"
                      @click="
                        (movegnboxshow = !movegnboxshow),
                          (medicineAtlasId = items.medicineAtlasId)
                      "
                      >更多</div
                    > -->
                      <!-- <div
                      class="movegnbox"
                      v-if="
                        movegnboxshow &&
                        medicineAtlasId == items.medicineAtlasId
                      "
                    >
                      <div @click="openAdd(items)">编辑</div>
                      <div @click="gobw(items)">查看</div>
                      <div @click="openDelete(items)">删除</div> 
                    </div> -->

                      <!-- <div class="bwitemdes">{{ items.medicineSystemName }}</div> -->
                    </div>
                  </div>
                </div>
              </a-card>
            </div></a-col
          >
          <div></div>
          <a-col :span="3">
            <div :style="{ display: 'flex' }">
              <a-card title="人体结构">
                <template #extra>
                  <!-- <a-link>More</a-link> -->
                </template>
                <div class="rtimg" v-if="!treeshow">
                  <indexty
                    ref="permarkersdom"
                    class="rtimgdf"
                    :permarkers="permarkers"
                    @permarkersfn="permarkersfn"
                  />
                </div>
                <div class="rtimg" v-if="treeshow">
                  <a-tree
                    blockNode
                    :data="treeData"
                    @select="changesd"
                    @getSelectedNodes="getSelectedNodes"
                    :fieldNames="{
                      key: 'systemId',
                      title: 'systemName',
                      children: 'bodyList',
                      icon: 'customIcon',
                    }"
                  />
                </div>

                <div class="rtimg rtimgs">
                  <a-button @click="looktree" type="primary" v-if="!treeshow">
                    解剖结构
                  </a-button>
                  <a-button @click="looktrees" type="primary" v-if="treeshow">
                    人体结构
                  </a-button>
                </div>
              </a-card>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
    <!--内容详情获取 -->

    <a-drawer
      :width="440"
      :visible="xqshow"
      @ok="handleOks"
      @cancel="handleCancels"
      unmountOnClose
    >
      <template #title> 内容管理 </template>
      <div style="height: 500px">
        <a-row :gutter="10">
          <a-col :span="1.2">
            <a-button @click="openAdds('xz')" type="primary">
              <template #icon>
                <icon-plus />
              </template>
              新增结构
            </a-button>
          </a-col>
          <a-col :span="1.2">
            <a-button
              @click="addbs()"
              type="primary"
              :disabled="!imgsrc.length > 0"
            >
              <template #icon>
                <icon-plus />
              </template>
              添加标记点
            </a-button>
          </a-col>
          <a-col :span="1.2">
            <a-button @click="upadd(items)" type="primary">
              <template #icon>
                <icon-plus />
              </template>
              上传图像
            </a-button>
          </a-col>
        </a-row>
        <a-table
          style="margin-top: 10px"
          :columns="columns"
          :loading="loading"
          :data="data"
          :expandable="expandable"
          :bordered="false"
          page-position="bottom"
          :pagination="pagination"
          @page-change="onPageChanges"
          @page-size-change="onPageSizeChange"
        >
          <template #option="{ record }">
            <a-space :size="18">
              <!-- <a-button @click="openAdd(record.id)" type="primary">
                添加下级
              </a-button> -->
              <a-button @click="openAddsbj(record)" type="outline">
                编辑
              </a-button>
              <a-button status="danger" @click="openDelete(record)">
                删除
              </a-button>
            </a-space>
          </template>
        </a-table>
      </div>
    </a-drawer>
    <!-- 新增/修改图谱名称 -->
    <a-modal
      v-model:visible="addShow"
      @cancel="handleCancel"
      :on-before-ok="handleCheck"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 图谱 </template>
      <a-form ref="addModel" :rules="rules" :model="addForm">
        <a-form-item field="bodyPartsId" label="人体部位">
          <a-select
            :field-names="fieldNames"
            v-model="addForm.bodyPartsId"
            placeholder="请选择人体部位"
            :options="bodyPartdata"
          >
          </a-select>
        </a-form-item>
        <a-form-item field="medicineSystemId" label="人体系统">
          <a-select
            :field-names="fieldNamessd"
            v-model="addForm.medicineSystemId"
            placeholder="请选择人体系统"
            :options="medicineSystemIddata"
          >
          </a-select>
        </a-form-item>

        <a-form-item field="medicineAtlasName" label="图谱名称">
          <a-input
            v-model="addForm.medicineAtlasName"
            size="large"
            placeholder="请输入图谱名称"
          />
        </a-form-item>
        <a-form-item field="atlasType" label="图谱类型">
          <a-select
            :field-names="fieldNamess"
            v-model="addForm.atlasType"
            placeholder="请选择人体部位"
            :options="atlasTypedata"
          >
          </a-select>
        </a-form-item>

        <a-form-item field="file" label="图片封面">
          <!-- :custom-request="tponProgress"  @change="tponChange"-->
          <a-upload
            :show-file-list="false"
            @progress="tponProgress"
            accept="image/*"
          >
            <template #upload-button>
              <div
                style="
                  background-color: var(--color-fill-2);
                  color: var(--color-text-1);
                  border: 1px dashed var(--color-fill-4);
                  height: 100px;
                  width: 100px;
                  border-radius: 2;
                  line-height: 100px;
                  text-align: center;
                "
              >
                <img
                  v-if="addForm.url"
                  :src="`${base + addForm.url}`"
                  alt=""
                  style="height: 100px; width: 100px"
                />
                <div v-else>上传图片</div>
              </div>
            </template>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 新增/修改解剖部位名称 -->
    <a-modal
      v-model:visible="addbwShow"
      @cancel="handleCancelbw"
      :on-before-ok="handleCheckbw"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 解剖部位</template>
      <a-form ref="addModel" :rules="ruless" :model="addForms">
        <a-form-item field="anatomicStructureName" label="结构名称">
          <a-input
            v-model="addForms.anatomicStructureName"
            size="large"
            placeholder="请输入解剖结构名称"
          />
        </a-form-item>

        <a-form-item field="c" label="所属部位">
          <a-select
            :field-names="fieldNames"
            v-model="addForms.bodyPartsId"
            placeholder="请选择所属部位"
            :options="bodyPartdata"
          >
          </a-select>
        </a-form-item>
        <a-form-item field="medicineSystemId" label="人体系统">
          <a-select
            :field-names="fieldNamessd"
            v-model="addForms.medicineSystemId"
            placeholder="请选择人体系统"
            :options="medicineSystemIddata"
          >
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 上传图像 -->
    <a-modal
      v-model:visible="upaddshow"
      @cancel="handleCancelbws"
      :on-before-ok="handleChecktx"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 上传图像</template>
      <a-form :rules="ruleup" :model="addFormsd" ref="upaddshows">
        <a-form-item field="type" label="图像分组">
          <a-select
            :field-names="fieldNamessdtx"
            v-model="addFormsd.type"
            placeholder="请选择图像分组"
            :options="atlasTypedatas"
            allow-clear
            allow-search
          >
          </a-select>
        </a-form-item>
        <a-form-item field="imgClassification" label="图像分类">
          <a-select
            :field-names="fieldNamessdtx"
            v-model="addFormsd.imgClassification"
            placeholder="请选择图像分类"
            :options="imgClassdata"
            allow-clear
            allow-search
          >
          </a-select>
        </a-form-item>
        <a-form-item field="url" label="上传图像">
          <a-upload :custom-request="customRequest" :limit="1" accept=".zip" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 添加标记点组件 -->
    <indexadmin
      v-if="addbsshow"
      @goback="goback"
      :imgsrcs="imgsrc"
      :imgclassdata="imgclassdata"
      :medicineAtlasId="medicineAtlasId"
    />
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive } from 'vue';
  import { Message, Modal } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import {
    tpList,
    rtbwlist,
    personList,
    tpxqList,
    getStructurelist,
    addimg,
    addatlas,
    upatlas,
    addStructure,
    updaStructure,
    DelStructure,
    select,
    upload,
    addupload,
    getTree,
    delTp,
    upDatestatus,
  } from '@/api/tplist.ts';
  const addbwShow = ref(false);
  const { loading, setLoading } = useLoading(true);

  /* 组件局部注册 */
  import { createApp, getCurrentInstance } from 'vue';
  const app = createApp({});
  import indexadmin from '@/views/login/indexadmin.vue';
  import indexty from '@/views/personadmin/indexty.vue';
  import { status } from 'nprogress';
  // import { putProgress } from '@/utils/oss.js';
  const bodyPartdata = ref([]);
  const atlasTypedata = ref([]);

  const bodyPartfieldnames = ref({ value: 'bodyPartsId', label: 'partsName' });
  app.component({
    indexadmin,
    indexty,
  });
  const upaddshows = ref();
  console.log('当前', upaddshows.value);

  // 修改图谱状态
  const status = ref(1);
  const statusfn = (id, event) => {
    console.log('当前图谱id', id, event);
    upDatestatus({
      medicineAtlasId: id,
      status: event,
    }).then((res) => {
      if (res.code == 200) {
        console.log('修改成功');
        fetchData();
      }
    });
  };
  // 上传图像
  const handleChecktx = (done) => {
    // if (!addFormsd.value.url.length > 0) {
    //   done(false);
    //   return;
    // }
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    upaddshows.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        console.log('走了验证');
        if (!errors) {
          addupload({
            ...addFormsd.value,
            medicineAtlasId: medicineAtlasId.value,
          }).then((res) => {
            if (res.code == 200) {
              // 添加成功
              Message.success({
                content: '图像添加成功',
              });
              done(true);
              upaddshow.value = false;
              addFormsd.value = {};
            } else {
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };

  const customRequest = (option) => {
    const { onProgress, onError, onSuccess, fileItem, name } = option;
    console.log('上传图像', fileItem.file);
    let formData = new FormData();
    formData.append('medicineAtlasId', medicineAtlasId.value);
    formData.append('file', fileItem.file);
    upload(formData).then((res) => {
      if (res.code == 200) {
        addFormsd.value.url = res.data;
        onSuccess();
        console.log('图像上传成功', res.data);
      }
    });
  };
  const atlasTypedatas = ref([]);
  const upaddshow = ref(false);
  const imgClassdata = ref([]);
  const upadd = () => {
    console.log('点击上传图像', txitem.value);
    let dictType = '';
    if (txitem.value.atlasTypeName == 'MRI') {
      dictType = 'mr_group';
    }
    if (txitem.value.atlasTypeName == 'CT') {
      dictType = 'ct_group';
    }
    if (txitem.value.atlasTypeName == 'DR') {
      dictType = 'dr_group';
    }
    select({ dictType: dictType }).then((res) => {
      if (res.code == 200) {
        console.log('查询图像类型成功', res.data);
        atlasTypedatas.value = res.data;
        upaddshow.value = true;
      }
    });
    select({ dictType: 'img_classification' }).then((res) => {
      if (res.code == 200) {
        console.log('查询图像类型成功', res.data);
        imgClassdata.value = res.data;
      }
    });
  };
  // 添加解刨结构

  const addForms = ref({});
  const addFormsd = ref({});
  const handleCheckbw = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    addModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          // console.log('当前id', addForm.value.medicineAtlasId);
          if (addForms.value.medicineAtlasId) {
            updaStructure(addForms.value).then((res) => {
              if (res.code == '200') {
                Message.success({
                  content: res.message,
                });
                done(true);
                getStructurelistd(medicineAtlasId.value);
                fetchData();
                addForms.value.anatomicStructureName = '';
              } else {
                done(false);
                addForms.value.anatomicStructureName = '';
              }
            });
          } else {
            addStructure({
              anatomicStructureName: addForms.value.anatomicStructureName,
              medicineAtlasId: medicineAtlasId.value,
              bodyPartsId: addForms.value.bodyPartsId,
              medicineSystemId: addForms.value.medicineSystemId,
            }).then((res) => {
              if (res.code == '200') {
                Message.success({
                  content: res.message,
                });
                getStructurelistd(medicineAtlasId.value);
                done(true);
                fetchData();
                addForms.value.anatomicStructureName = '';
              } else {
                done(false);
                addForms.value.anatomicStructureName = '';
              }
            });
          }
        } else {
          done(false);
          addForms.value.anatomicStructureName = '';
        }
      }
    );
  };
  // 图片上传oss
  // const { proxy } = getCurrentInstance();
  const file = ref();
  const tponChange = (_, currentFile) => {
    console.log('当前图片地址', currentFile);
    // addForm.value.file = {
    //   ...currentFile,
    //   url: currentFile.url,
    // };
    // const mainkey = window.config.VUE_APP_BASE_KEY;

    // const key = `${mainkey}/room/images/${currentFile.file.name}`;
    // putProgress(key, currentFile.file).then((res) => {
    //   console.log('上传完成', proxy.baseurl + res.name);
    //   addForm.value.url = proxy.baseurl + res.name;
    // });

    // 版本2
    if (currentFile != undefined) {
      let formData = new FormData();
      formData.append('file', currentFile.file);
      addimg(formData).then((res) => {
        if (res.code == 200) {
          addForm.value.url = res.data;
          console.log('上传成功', res.data);
        }
      });
    }
  };
  const permarkersfn = (i) => {
    permarkers.value = i;
  };
  const tponProgress = (currentFile) => {
    // addForm.value.file = {
    //   ...currentFile,
    //   url: currentFile.url,
    // };
    // console.log('当前图片地址2', currentFile);
    let formData = new FormData();
    formData.append('file', currentFile.file);
    addimg(formData).then((res) => {
      if (res.code == 200) {
        addForm.value.url = res.data;
        console.log('上传成功', res.data);
      }
    });
  };
  const treeshow = ref(false);
  const looktree = () => {
    treeshow.value = true;
  };
  const looktrees = () => {
    treeshow.value = false;
  };
  const base = ref(window.config.VUE_APP_IMG_API);
  console.log('base基地址', base.value);

  const addbsshow = ref(false);
  const addbs = () => {
    xqshow.value = false;
    addbsshow.value = true;
  };
  const goback = () => {
    addbsshow.value = false;
  };
  const handleOks = () => {
    xqshow.value = false;
  };
  const handleCancels = () => {
    xqshow.value = false;
  };
  const handleCancel = () => {
    addShow.value = false;
  };
  const handleCancelbw = () => {
    addbwShow.value = false;
    addForms.value = {};
  };
  const handleCancelbws = () => {
    addbwShow.value = false;
  };
  const data = ref([]);
  const columns = [
    {
      title: '解剖结构名称',
      dataIndex: 'anatomicStructureName',
    },
    {
      title: '所属部位名称',
      dataIndex: 'bodyPartsName',
    },
    {
      title: '功能',
      slotName: 'option',
    },
  ];
  const xqshow = ref(false);
  const rules = {
    medicineAtlasName: [
      {
        required: true,
        message: '请输入图谱名称',
      },
    ],
    medicineSystemId: [
      {
        required: true,
        message: '请选择人体系统',
      },
    ],
    bodyPartsId: [
      {
        required: true,
        message: '请选择人体部位',
      },
    ],
    url: [
      {
        required: true,
        message: '请上传图谱封面',
      },
    ],
    atlasType: [
      {
        required: true,
        message: '请选择图谱类型',
      },
    ],
  };

  const ruless = {
    anatomicStructureName: [
      {
        required: true,
        message: '请输入结构名称',
      },
    ],
    medicineSystemId: [
      {
        required: true,
        message: '请选择系统',
      },
    ],
    bodyPartsId: [
      {
        required: true,
        message: '请选择人体部位',
      },
    ],
  };

  const ruleup = {
    url: [
      {
        required: true,
        message: '请输上传图像',
      },
    ],
  };
  const generateDataModel = () => {
    return {
      file: [],
    };
  };
  const addForm = ref(generateDataModel());
  const addShow = ref(false);
  const addModel = ref();
  // console.log('当前', addModel);
  const openAdds = () => {
    addbwShow.value = true;
    addForms.value.bodyPartsId = '';
    addForms.value.medicineSystemId = '';
    // addForm.value = {
    //   ...generateDataModel(),
    //   parentId: parentId,
    // };
  };

  const openAddsbj = (item) => {
    addbwShow.value = true;
    addForms.value = item;
    console.log('编辑成功', addForms.value);
  };

  const openAdd = (item) => {
    movegnboxshow.value = false;
    select({ dictType: 'atlas_type' }).then((res) => {
      if (res.code == 200) {
        atlasTypedata.value = res.data;

        if (item.atlasTypeName != null) {
          atlasTypedata.value.forEach((items) => {
            if (items.dictLabel == item.atlasTypeName) {
              addForm.value.atlasType = items.dictDataId;
            }
          });
        }
      }
    });
    addShow.value = true;
    addForm.value = {
      ...item,
    };
    console.log('log', addForm.value);
  };

  const handleCheck = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    addModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          // console.log('当前id', addForm.value.medicineAtlasId);
          if (addForm.value.medicineAtlasId) {
            upatlas(addForm.value).then((res) => {
              if (res.code == '200') {
                Message.success({
                  content: res.message,
                });
                done(true);
                fetchData();
              } else {
                done(false);
              }
            });
          } else {
            addatlas(addForm.value).then((res) => {
              if (res.code == '200') {
                Message.success({
                  content: res.message,
                });
                done(true);
                fetchData();
              } else {
                done(false);
              }
            });
          }
        } else {
          done(false);
        }
      }
    );
  };
  const generateFormModel = () => {
    return {};
  };
  const reset = () => {
    formModel.value = {};
    fetchData();
  };
  const changesd = (
    selectedKeys: Array<string | number>,
    data: {
      selected?: boolean;
      selectedNodes: TreeNodeData[];
      node?: TreeNodeData;
      e?: Event;
    }
  ) => {
    // 获取当前点击的节点数据
    const currentNode = data.node;
    if (currentNode.medicineAtlasId) {
      formModel.value.medicineAtlasId = currentNode.medicineAtlasId;
      tpList({
        medicineAtlasId: formModel.value.medicineAtlasId,
        medicineAtlasName: formModel.value.medicineAtlasName,
        medicineSystemId: formModel.value.medicineSystemId,
        bodyPartsId: formModel.value.bodyPartsId,
      }).then((res) => {
        tplistdata.value = res.data;
      });
    }

    // console.log('所有被选中的节点:', allSelectedNodes);
    // console.log('当前节点是否被选中:', isSelected);
  };
  const getSelectedNodes = (i) => {
    // console.log('chang试试s', i);
  };
  const formModel = ref(generateFormModel());
  //   获取数据更新
  const fetchData = async () => {
    setLoading(true);
    try {
      tpList({
        medicineAtlasId: formModel.value.medicineAtlasId,
        medicineAtlasName: formModel.value.medicineAtlasName,
        medicineSystemId: formModel.value.medicineSystemId,
        bodyPartsId: formModel.value.bodyPartsId,
      }).then((res) => {
        tplistdata.value = res.data;
      });
      rtbwlist().then((res) => {
        if (res.code == 200) {
          permarkers.value = [];
          localStorage.setItem('permarkers', JSON.stringify([]));
          res.data.forEach((item) => {
            if (item.partsMark != null) {
              // console.log('获取人体部位', res.data);
              // console.log('获取人体部位', item);
              const markingPointsObjects = JSON.parse(item.partsMark);
              const existingMarker = permarkers.value.find(
                (marker) => marker.dcomid == markingPointsObjects.dcomid
              );

              if (existingMarker) {
                existingMarker.bsdata.push(...markingPointsObjects.bsdata);
              } else {
                permarkers.value.push(JSON.parse(item.partsMark));
              }
            }
          });
          // permarkersdom.value.draw();
          // console.log('当前dom', permarkersdom.value.draw());
        }
      });
      personList().then((res) => {
        bodyPartdata.value = res.data.list;
      });
      select({ dictType: 'medicine_system' }).then((res) => {
        medicineSystemIddata.value = res.data;
      });
      // select({ dictType: 'img_classification' }).then((res) => {
      //   if (res.code == 200) {
      //     console.log('查询图像类型成功', res.data);
      //     imgClassdata.value = res.data;
      //   }
      // });

      // 获取树结构
      getTree({ dictType: 'medicine_system' }).then((res) => {
        if (res.code == 200) {
          console.log('查询树成功', res.data);
          treeData.value = res.data;
        }
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  const treeData = ref([]);
  const permarkersdom = ref();
  const medicineSystemIddata = ref();
  const fieldNames = { value: 'bodyPartsId', label: 'partsName' };
  const fieldNamess = { value: 'dictDataId', label: 'dictLabel' };
  const fieldNamessd = { value: 'dictDataId', label: 'dictLabel' };
  const fieldNamessdtx = { value: 'dictDataId', label: 'dictLabel' };
  const tplistdata = ref([]);
  const permarkers = ref([]);
  const medicineAtlasId = ref('');
  const imgsrc = ref([]);
  const imgclassdata = ref([]);
  const txitem = ref({});
  //  图谱详情 内容管理
  const gobw = (item) => {
    console.log('内容管理', item);
    addForms.value.bodyPartsId = item.bodyPartsId;
    addForms.value.medicineSystemId = item.medicineSystemId;
    txitem.value = item;
    movegnboxshow.value = false;
    // 修改
    // openAdd(item);
    medicineAtlasId.value = item.medicineAtlasId;
    // 查询一下图谱详情
    tpxqList({ medicineAtlasId: item.medicineAtlasId }).then((res) => {
      if (res.code == 200) {
        imgsrc.value = res.data.imgList;
        imgclassdata.value = res.data.classList;
        imgclassdata.value.unshift({
          imgClassificationName: '全部',
          imgClassification: '全部',
        });
        xqshow.value = true;
      }
    });
    // 查询一下解刨列表吧
    getStructurelist({
      medicineAtlasId: item.medicineAtlasId,
      pageNum: pagination.current,
      ...pagination,
    }).then((res) => {
      if (res.code == 200) {
        console.log('解剖查询成功', res.data);
        data.value = res.data.list;
        pagination.total = res.data.total;
        pagination.current = res.data.current;
      }
    });
  };
  const openDelete = (item) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除吗？',
      onOk() {
        DelStructure({
          anatomicStructureId: item.anatomicStructureId,
        }).then((res) => {
          if (res.code == '200') {
            Message.success({
              //   content: res.message,
              content: '删除成功',
            });
            getStructurelistd(medicineAtlasId.value);
            fetchData();
          }
        });
      },
    });
  };
  const openDeletes = (item) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除吗？',
      onOk() {
        delTp({
          medicineAtlasId: item.medicineAtlasId,
        }).then((res) => {
          if (res.code == '200') {
            Message.success({
              //   content: res.message,
              content: '删除成功',
            });

            fetchData();
          }
        });
      },
    });
  };
  const movegnboxshow = ref(false);
  const getStructurelistd = (medicineAtlasId) => {
    getStructurelist({
      medicineAtlasId: medicineAtlasId,
      pageNum: pagination.current,
      ...pagination,
    }).then((res) => {
      if (res.code == 200) {
        console.log('解剖查询成功', res.data);
        data.value = res.data.list;
        pagination.total = res.data.total;
        pagination.current = res.data.current;
      }
    });
  };
  const basePagination: Pagination = {
    current: 1,
    pageSize: 13,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageChanges = (current: number) => {
    pagination.current = current;
    getStructurelistd();
  };
  fetchData();
</script>

<style scoped>
  .wbox {
    display: flex;
    flex-direction: column;
  }
  .bwbox {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 18px 100px; /* 添加元素z间的间距 */
    width: 100%; /* 设置宽度为100% */
    height: 100%;
    box-sizing: border-box; /* 包含 padding 和 border 在内 */
    justify-content: flex-start; /* 从左边开始对齐 */
  }
  .bwitem {
    flex: 0 0 0 180px; /* 固定宽度为400px */
    height: 200px;

    box-sizing: border-box; /* 确保 padding 和 border 在内 */
    display: flex;
    /* align-items: center; */
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    position: relative;
    /* 水平居中对齐 */
  }
  .bwitemimg {
    cursor: pointer;
    width: 180px;
    height: 180px;
  }
  .bwitemimg img {
    width: 180px;
    height: 180px;
  }
  .bwitemdesbox {
    width: 180px;
    display: flex;
    margin: 10px 0;
    position: relative;
    /* flex-direction: column; */
    /* justify-content: center;*/
    /* align-content: center; */
  }
  .movebox {
    cursor: pointer;
    font-size: 16px;
    color: rgb(5, 122, 255);
    position: absolute;
    right: 0;
  }
  .bwitemtitle {
    font-size: 16px;
    width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* background-color: red; */
  }
  .bwitemdes {
    /* margin: 10px 0; */
    font-size: 16px;
  }
  .movegnbox {
    cursor: pointer;
    background-color: #fff;
    width: 80px;
    border: 1px solid #c2c2c2;
    position: absolute;
    z-index: 9;
    right: 0px;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .movegnbox div {
    margin: 5px 0;
  }
  .movegnbox div:hover {
    color: rgb(5, 122, 255);
  }
  .rtimg {
    width: 430px;
  }
  .bocd .arco-btn {
    margin: 5px 10px;
  }
  .rtimgs {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 10px;
  }
  .rtimgdf {
    margin-top: -20px;
  }
  .gmove {
    position: absolute;
    right: 0;
  }
  .gmove button {
    padding: 0 0;
    height: 0;
  }
  .tpmainbox {
    height: 700px;
    overflow: hidden;
    overflow-y: scroll;
  }
  /* 滚动条美化 */
  .beautifulScroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666666;
  }
</style>
